<template>
	<view class="content">
		<view class="top">
			<span class="right"></span>
			<view class="mid">
				<p class="mid_p">requestPayment</p>

			</view>
		</view>
		<view class="bot">
			<p class="bot_a">支付金额</p>
			<p class="bot_b">￥0.01</p>
			<p class="bot_c">实际接口应用中可自定义金额</p>
			<view class="pay">
				<view class="left">
					<view @click="weixin" hover-class="checkActive" hover-stay-time="200" class="left_a">
						<image class="left_i" src="../../static/微信.png" mode=""></image>
					</view>

				</view>
				<view class="right">
					<view @click="show=true" hover-class="checkActive" hover-stay-time="200" class="right_b">
						<image class="right_i" src="../../static/支付宝支付.png" mode=""></image>
					</view>

				</view>
			</view>

		</view>
		<u-modal :show="show" :content='content' @confirm="ok"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				content: '支付宝功能逐渐完善中，敬请期待🥰'
			}
		},
		methods: {

			ok() {
				this.show = false;
			},
			weixin() {
				let openid = uni.getStorageSync('code')
				if (openid && Date.now() < openid.expires) {
					config.headers.authorization = `Bearer ${token.value}`
				} else {

				}

				let dingdan = Math.random() * 100000000000000000
				let dingdan1 = dingdan.toString()
				uni.request({
					// 111.67.198.176
					url: "http://localhost:8000/pay/placeOrder",
					method: 'POST',
					data: {
						openid: openid,
						total: 1,
						description: "小企鹅",
						out_trade_no: dingdan1
					},
					success(results) {
						if (results.data.code == 200) {
							const {
								appid,
								nonceStr,
								package: pkg,
								timeStamp,
								signType,
								paySign
							} = results.data.data

							uni.requestPayment({
								timeStamp,
								nonceStr,
								package: pkg,
								signType,
								paySign,
								success(res) {
									uni.navigateTo({
										url: '/pages/Order details/Order details',
									});
								},
								fail(err) {
									console.log(err, 'err44444');
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(palegreen, white, skyblue);

		.top {
			width: 100vw;
			height: 350rpx;

			.right {
				font-size: 40rpx;
				margin-right: 300rpx;
				font-weight: 600;
				margin-top: 20rpx;
			}

			.mid {
				.mid_p {
					color: #cacaca;
					width: 280rpx;
					height: 70rpx;
					text-align: center;
					font-size: 35rpx;
					margin-left: 230rpx;
					margin-top: 100rpx;
					border-bottom: 3rpx solid #cacaca;
				}
			}

		}

		.bot {
			width: 100vw;
			height: 600rpx;

			.bot_a {
				font-weight: 520;
				margin-left: 310rpx;
				padding-top: 60rpx;
			}

			.bot_b {
				font-size: 65rpx;
				margin-left: 270rpx;
				padding-top: 30rpx;
			}

			.bot_c {
				color: #cacaca;
				margin-left: 160rpx;
				padding-top: 30rpx;
			}

			.pay {
				margin-top: 12rpx;
				width: 100vw;
				height: 300rpx;
				display: flex;
				margin-top: 60rpx;

				.left {
					width: 50vw;
					height: 200rpx;

					.checkActive {
						opacity: .8;
						background-color: #eee;
					}

					.left_a {
						width: 120rpx;
						height: 120rpx;
						margin-left: 120rpx;
						margin-top: 20rpx;

					}

					.left_i {
						width: 100rpx;
						height: 100rpx;
						margin: 10rpx;
					}
				}

				.right {
					width: 50vw;
					height: 200rpx;

					.checkActive {
						opacity: .8;
						background-color: #eee;
					}

					.right_b {
						width: 120rpx;
						height: 120rpx;
						margin-left: 120rpx;
						margin-top: 20rpx;

					}

					.right_i {
						width: 100rpx;
						height: 100rpx;
						margin: 10rpx;
					}
				}
			}
		}
	}
</style>